<script setup>
import {Lock, User} from "@element-plus/icons-vue";
import {get, post} from '@/net'
import router from "@/router/index.js";
import {reactive} from "vue";
import {ElMessage} from "element-plus";
import {useStore} from "@/stores/index.js";

const store = useStore()
// 表单数据
const form = reactive({
  username: '',
  password: '',
  remember: false
})

// 登入
const login = () => {
  //判断表单数据,用户名和密码必填
  if (!form.username || !form.password){
    ElMessage.warning('用户名和密码不能为空')
  }else {
    post('/api/auth/login', {
      username: form.username,
      password: form.password,
      remember: form.remember
    },(message)=>{
      //登入成功回调函数
      ElMessage.success(message)
      //用户登入之后同步路由守卫信息
      get('/api/user/info', (message) => {
        // 如果已经登入,自动跳转到index
        store.auth.user = message
        router.push('/index')
      }, () => {
        store.auth.user = null
        // 跳转到登入的首页
        router.push('/')
      })
    })
  }
}

</script>

<template>
  <!--  单独左侧的登入界面    -->
  <div style="text-align: center;margin: 20px">
    <!--   居中     -->
    <div style="text-align: center;margin-top: 150px">
      <!--   提示部分       -->
      <div style="font-size: 25px;font-weight: bold">登入</div>
      <div style="font-size: 10px;color: gray">在进入系统之前请先输入用户名或密码进行登入</div>
      <div style="margin-top: 50px">
        <!-- 通过from表单,绑定数据 -->
        <el-input v-model="form.username" type="text" placeholder="用户名/邮箱">
          <!--          导入一个图标    -->
          <template #prefix>
            <el-icon>
              <User/>
            </el-icon>
          </template>
        </el-input>

        <el-input v-model="form.password" type="text" style="margin-top: 10px" placeholder="密码">
          <!--          导入一个图标    -->
          <template #prefix>
            <el-icon>
              <Lock/>
            </el-icon>
          </template>
        </el-input>
        <!--   多选框   -->

        <el-row style="margin-top: 5px">
          <el-col :span="12" style="text-align: left"><!--左边-->
            <el-checkbox v-model="form.remember" label="记住我" size="large"/>
          </el-col>
          <!--     点击忘记密码跳转到忘记密码页面     -->
          <el-col :span="12" style="text-align: right">
            <el-link @click="router.push('/forgot')">忘记密码</el-link>
          </el-col>
        </el-row>

        <!--  登入 -->
        <div style="margin-top: 50px">
          <!--    绑定登入事件      -->
          <el-button @click="login()" style="width: 250px" type="success" plain>登入</el-button>
        </div>

        <!--  其他操作  -->
        <el-divider>
          <span style="color: grey">没有账号</span>
        </el-divider>
        <div>
          <!--   点击注册直接跳转到注册页面    -->
          <el-button  @click="router.push('/register')" style="width: 250px" type="warning" plain>注册</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>